<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定制家具 - 渡物 Dimension</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
</head>

<div class="logo-sticker">
  <img src="assets/images/logo.png" alt="渡物 Dimension Logo">
</div>

<div class="top-right-img">
  <img src="assets/images/right_nav.png" alt="top right image">
</div>

<header class="site-header">
  <div class="nav-container">
 <!-- 导航菜单 -->
    <nav class="nav-menu">
	  <div class="nav-item">
          <a href="welcome.html">首页</a>
        </div>
		
      <div class="nav-item">
        <a href="designs.html" style="color: var(--primary); font-weight: 600;">设计</a>
      </div>
	  
      <div class="nav-item dropdown">
        <span><a href="categories.html" >商品<a></span>
        <div class="dropdown-content">
          <a href="categories.html#基础">基础
		  <img src="assets/images/1.png" alt="基础" class="menu-img">
		  </a>
          <a href="categories.html#灯类">灯类
		  <img src="assets/images/2.png" alt="灯类" class="menu-img">
		  </a>
          <a href="categories.html#床类">床类
		  <img src="assets/images/3.png" alt="床类" class="menu-img">
		  </a>
          <a href="categories.html#桌类">桌类
		  <img src="assets/images/4.png" alt="桌类" class="menu-img">
		  </a>
          <a href="categories.html#椅类">椅类
		  <img src="assets/images/5.png" alt="椅类" class="menu-img">
		  </a>
		  <a href="categories.html#凳类">凳类
		  <img src="assets/images/6.png" alt="凳类" class="menu-img">
		  </a>
		  <a href="categories.html#沙发">沙发
		  <img src="assets/images/7.png" alt="沙发" class="menu-img">
		  </a>
		  <a href="categories.html#柜类">柜类
		  <img src="assets/images/8.png" alt="柜类" class="menu-img">
		  </a>
		  <a href="categories.html#架类">架类
		  <img src="assets/images/9.png" alt="架类" class="menu-img">
		  </a>
		  <a href="categories.html#装饰">装饰
		  <img src="assets/images/10.png" alt="装饰" class="menu-img">
		  </a>
		  <a href="categories.html#组合">组合
		  <img src="assets/images/11.png" alt="组合" class="menu-img">
		  </a>
		  <a href="categories.html#其他">其他
		  <img src="assets/images/12.png" alt="其他" class="menu-img">
		  </a>
        </div>
      </div>

      <div class="nav-item search">
        <input type="text" placeholder="搜索商品..." />
      </div>

      <div class="nav-item">
        <a href="settings.html">设置</a>
      </div>

      <div class="nav-item">
        <a href="user.html">个人中心</a>
      </div>

      <div class="nav-item">
        <a href="contact.html">联系我们</a>
      </div>
      <div class="nav-item">
          <button class="music-toggle btn btn-outline">🎵</button>
      </div>
    </nav>
  </div>
</header>

<body>
    <!-- 导航占位 -->
    <div class="nav-spacer"></div>

    <!-- 定制页面内容 -->
    <div class="container">
        <h1 class="function_title">家具定制器</h1>
        <div class="flex gap-2" style="align-items: flex-start;">
            <!-- 3D展示区域 -->
            <div style="flex: 2;">
                <div id="canvas-container" style="width: 100%; height: 500px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);"></div>
                <div class="flex gap-1 u-mt-2" style="justify-content: center;">
                    <button class="btn" onclick="switchShape('cube')">立方体</button>
                    <button class="btn" onclick="switchShape('cylinder')">圆柱体</button>
                    <button class="btn" onclick="switchColor(0xff0000)">红色</button>
                    <button class="btn" onclick="switchColor(0x00ff00)">绿色</button>
                    <button class="btn" onclick="switchColor(0x0000ff)">蓝色</button>
                </div>
            </div>
            <!-- 描述区域 -->
            <div class="form-card" style="flex: 1; max-width: 300px;">
                <h2>定制家具描述</h2>
                <p><span class="bold-text">立方体家具</span></p>
                <p>这款简约的立方体家具设计，兼具美观与实用性，可作为座椅或装饰品。支持多种颜色选择，材质轻便耐用，适合现代家居环境。</p>
                <p><span class="bold-text">圆柱体家具</span></p>
                <p>圆柱体设计带来柔和的视觉效果，可用作小型茶几或辅助座椅。表面光滑，搭配多种颜色，增添空间的优雅与现代感。</p>
            </div>
        </div>
    </div>

    </body>

    <!-- 页脚 -->
    <footer class="site-footer">
        © 2025 渡物 Dimension. 保留所有权利。
    </footer>

    <!-- Three.js 脚本 -->
    <script>
        let scene, camera, renderer, object, currentShape = 'cube';
        let isDragging = false, previousMouseX = 0;

        function init() {
            // 设置场景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xF5F5F5);

            // 设置相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 5;

            // 设置渲染器
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(document.getElementById('canvas-container').clientWidth, 500);
            document.getElementById('canvas-container').appendChild(renderer.domElement);

            // 创建初始立方体
            createShape('cube', 0xff0000);

            // 添加光源
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
            directionalLight.position.set(5, 5, 5);
            scene.add(directionalLight);

            // 鼠标交互
            document.getElementById('canvas-container').addEventListener('mousedown', onMouseDown);
            document.getElementById('canvas-container').addEventListener('mousemove', onMouseMove);
            document.getElementById('canvas-container').addEventListener('mouseup', onMouseUp);
            window.addEventListener('resize', onWindowResize);

            animate();
        }

        function createShape(shape, color) {
            if (object) scene.remove(object);
            const material = new THREE.MeshStandardMaterial({ color: color });
            let geometry;
            if (shape === 'cube') {
                geometry = new THREE.BoxGeometry(2, 2, 2);
            } else {
                geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
            }
            object = new THREE.Mesh(geometry, material);
            scene.add(object);
            currentShape = shape;
        }

        function switchShape(shape) {
            createShape(shape, object.material.color.getHex());
        }

        function switchColor(color) {
            createShape(currentShape, color);
        }

        function onMouseDown(event) {
            isDragging = true;
            previousMouseX = event.clientX;
        }

        function onMouseMove(event) {
            if (isDragging) {
                const deltaX = event.clientX - previousMouseX;
                object.rotation.y += deltaX * 0.01;
                previousMouseX = event.clientX;
            }
        }

        function onMouseUp() {
            isDragging = false;
        }

        function onWindowResize() {
            const container = document.getElementById('canvas-container');
            camera.aspect = container.clientWidth / 500;
            camera.updateProjectionMatrix();
            renderer.setSize(container.clientWidth, 500);
        }

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

        window.onload = init;
    </script>
    <script src="assets/js/search.js"></script>
    <script src="assets/js/music.js"></script>
</body>
</html>